<template>
  <div class="box">
    <div class="bck"></div>
    <div class="card">
      <div><div class="qrcode" ref="qrCodeUrl"></div></div>
      <div class="font">扫描二维码可查看鲜奶销售信息</div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import { getValue } from '../../utils/auth'
export default {
  data() {
    return {
        id:getValue('milKId')
    }
  },
  methods: {
    creatQrCode() {
      let str = process.env.VUE_APP_QRCODE_BASE_URL +  this.id + `/`
      console.log(str)
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: str,
        height:200,
        width:200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    }
  },
  mounted(){
      this.creatQrCode()
  }
}
</script>
<style lang="scss" scoped>
.box {
  position: relative;
}
.bck {
  background: #37b5b5;
  height: 240px;
}
.card {
  height: 322px;
  width: 90%;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(102, 109, 115, 0.08);
  border-radius: 8px;
  position: absolute;
  top: 14%;
  left: 4.9%;
  // left: 6.5%;
}
.font {
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-top: 10px;
}
.qrcode {
  display: flex;
  justify-content: center;
  margin-top: 46px;
}
</style>
